<template>

  <div class="refine_addmember">
    <h2 class="titleblue">{{!!this.contactData ? '编辑' : '添加'}}人员</h2>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="姓名" prop="name">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>
      <el-form-item label="管理单位" prop="orgId">
        <el-select v-model="ruleForm.orgId" v-if='insideGroup && level < 2' :disabled='level !== 0' class="select-width-220"
                   @change="dpChange">
          <el-option
            v-for="item in orgArray"
            :key="'o' + item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
        <el-input v-model="ruleForm.orgName" v-else disabled class="select-width-220"></el-input>
      </el-form-item>
      <el-form-item label="所属部门" prop="deptId">
        <el-select v-model="ruleForm.deptId" v-if='level < 2 && insideGroup' class="select-width-220">
          <el-option
            v-for="item in deptArray"
            :key="'d' + item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
        <el-input v-model="ruleForm.deptName" v-else :disabled="insideGroup" class="select-width-220"></el-input>
      </el-form-item>
      <el-form-item label="联系电话" prop="telephone">
        <el-input v-model="ruleForm.telephone"></el-input>
      </el-form-item>
      <el-form-item class="footerbtn">
        <el-button type="primary" @click="doCreate" class="sure">{{!!this.contactData ? '保存' : '添加'}}</el-button>
        <el-button class="cancel" @click="doCancel">取消</el-button>
      </el-form-item>
    </el-form>

  </div>

</template>

<script>
  import contactService from '@/services/ContactService'

  export default {
    props: ['contactId', 'orgArray', 'contactData', 'insideGroup'],
    watch: {
      contactData: {
        deep: true,
        handler(newVal, oldVal) {
          // this.contactData = newVal
          if (newVal) {
            this.ruleForm.orgId = this.contactData.orgId
            this.ruleForm.deptId = this.contactData.deptId
            this.ruleForm.name = this.contactData.name
            this.ruleForm.telephone = this.contactData.telephone
            this.ruleForm.deptName = this.contactData.deptName
            this.ruleForm.orgName = this.contactData.orgName
            this.dpChange()
          }

        }
      }
    },
    data: function () {
      return {
        ruleForm: {
          name: '',
          deptId: '',
          orgId: '',
          telephone: '',
          deptName: '',
          orgName: ''
        },
        level: this.$profile.organiza.level,
        deptArray: [],
        rules: {
          name: [{
            required: true,
            message: '请输入姓名',
            trigger: 'blur'
          }],
          telephone: [{
            required: true,
            message: '请输入联系电话',
            trigger: 'blur'
          }],
        }
      };
    },
    created() {
      if (!this.insideGroup) {
        this.ruleForm.orgName = '烟台海事局'
      }

      if (this.contactData) {
        this.ruleForm.orgId = this.contactData.orgId
        this.ruleForm.deptId = this.contactData.deptId
        this.ruleForm.name = this.contactData.name
        this.ruleForm.telephone = this.contactData.telephone
        this.ruleForm.deptName = this.contactData.deptName
        this.ruleForm.orgName = this.contactData.orgName
      } else {
        if (this.level === 2) {
          let parentOrg = this.orgArray.find(org => org.id === this.$profile.organiza.parentId)
          this.ruleForm.orgId = parentOrg.id
          this.ruleForm.deptId = this.$profile.organiza
        } else if (this.level === 1) {
          this.ruleForm.orgId = org.id
        }
      }
      this.dpChange()
    },
    methods: {
      doCreate() {
        if (this.ruleForm.name.length == 0) {
          this.$alert('姓名不能为空', '提示');
          return false;
        }
        if (this.ruleForm.telephone.length == 0) {
          this.$alert('联系电话不能为空', '提示');
          return false;
        }
        this.ruleForm.skey = localStorage.getItem('auth');
        let entity = {
          ...this.ruleForm,
          insideGroup: this.insideGroup ? true : false
        }
        if (entity.orgId) {
          let org = this.orgArray.find(o => o.id === entity.orgId)
          entity.orgName = org.name
          if (entity.deptId) {
            let dept = org.sub.find(d => d.id === entity.deptId)
            entity.deptName = dept.name
          }
        }
        if (this.contactData) {
          entity.id = this.contactData.id
          contactService.update(entity).then(() => {
            this.$alert('修改成功', {
              callback: action => {
                this.clearFormData()
                this.$emit("refresh");
              }
            });
          })
        } else {
          contactService.create(entity).then((res) => {
            this.$alert('添加成功', {
              callback: action => {
                this.clearFormData()
                this.$emit("refresh");
              }
            });
          })
        }
      },
      doCancel() {
        this.clearFormData()
        this.$emit("close");
      },
      clearFormData() {
        this.ruleForm.name = ''
        this.ruleForm.telephone = ''
        this.ruleForm.orgId = ''
        this.ruleForm.deptId = ''
      },
      dpChange() {
        let org = this.orgArray.find(o => o.id === this.ruleForm.orgId)
        this.deptArray = org ? org.sub : []
      }
    }
  }
</script>

<style lang="scss">

  .refine_addmember {
    .el-form {
      margin: 0px auto;
      padding: 50px 0px;
    }
    .el-form-item {
      width: 330px;
      margin: 20px auto;
    }
    .footerbtn {
      text-align: center;
      margin: 30px 0 0 0;
      width: 100%;
    }
    .footerbtn .el-form-item__content {
      margin-left: 0 !important;
    }
    .select-width-220 {
      width: 230px;
    }
    .sure {
      width: 110px;
      height: 36px;
      background-color: #0062cd;
      border-radius: 4px;
      padding: 0;
    }
    .cancel {
      width: 110px;
      height: 36px;
      border-radius: 4px;
      border: solid 1px #0062cd;
      padding: 0;
      color: #0062cd;
    }
  }
</style>
